<template>
    <div class="page">
        <gzg-search :config="searchConfig" :showMore="true" :form="searchForm" :label-width="120"
            @search="search"></gzg-search>

        <div class="tool-wrap">
            <div class="item">
                <div class="label">赠送服务商账号:</div>
                <div class="val">{{ stat_data.gift_provider_num }}个</div>
            </div> 
            <div class="item">
                <div class="label">已创建服务商账号:</div>
                <div class="val">{{ stat_data.open_provider_num }}个</div>
            </div>  
            <el-button class="btn" type="primary" @click="add">新增</el-button>
        </div>
        <div class="grid-wrap">
            <el-table style="width:100%;" height="100%" row-key="id" :data="tableData">
                <el-table-column label="手机号码" prop="mobile"></el-table-column>
                <el-table-column label="姓名" prop="real_name"></el-table-column>
                <el-table-column label="状态" prop="agent_status_desc">
                    <template #default="props">
                        <div style="display: flex;align-items: center;">
                            <div>{{ props.row.agent_status_desc }}</div>
                            <el-tooltip v-if="props.row.refuse_reason"
                                        :content="`原因:${ props.row.refuse_reason }`"
                                        placement="top">
                                    <el-button size="small" type="danger" style="margin-left: 10px;">原因</el-button>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="赠送商家账号额度" prop="gift_num"></el-table-column>
                <el-table-column label="已开通商家数" prop="open_seller_num"></el-table-column>

                <el-table-column label="限制负责区域" prop="region_text"></el-table-column>
                <el-table-column label="关联归属员工" prop="account_real_name"></el-table-column>

                <el-table-column label="操作" fixed="right" width="120px">
                    <template #default="props">
                        <el-button link type="primary" size="small" v-if="props.row.button.edit_btn" @click="edit(props.row)">编辑</el-button>
                        <el-button link type="primary" size="small" v-if="props.row.button.close_btn" @click="handleEnable(props.row)">禁用</el-button>
                        <el-button link type="primary" size="small" v-if="props.row.button.open_btn" @click="handleEnable(props.row)">启用</el-button>
                    </template>
                </el-table-column>

            </el-table>
        </div>
        <div class="page-wrap">
            <el-pagination v-model:current-page="params.page"
                           v-model:page-size="params.page_size"
                           :page-sizes="[100, 200, 300, 400]" 
                           layout="total, prev, pager, next" 
                           :total="total"
                           @size-change="handleSizeChange" 
                           @current-change="handleCurrentChange" />

        </div>
        <view-dialog :dialogVisible="dialogVisible" :id="detail_id" :state="dialogState" @success="dialogSuccess"
            @close="dialogVisible = false"></view-dialog>
        
    </div>
</template>
<script lang="ts" setup>
import { ref, reactive, watch, computed, onMounted } from 'vue'
import { InfoFilled, Plus, Search, Hide, View } from '@element-plus/icons-vue'
import { ElMessageBox, ElMessage } from 'element-plus'

import { assign } from 'lodash'

import viewDialog from './component/view-dialog/index'

import systemStore from '@/store/modules/system'

import { getProviderList, toggleProvider } from 'services/setting'

import type { User } from './index'

const $systemStore = systemStore()

const searchForm = reactive({
    name: '',
    mobile: '',
    status: '',
})

const stat_data = reactive({
    gift_provider_num:'',
    open_provider_num:''
})

const searchConfig = reactive([ {
    id: 'name',
    label: '姓名',
    placeholder: '请输入姓名',
    type: 'input'
}, {
    id: 'mobile',
    label: '手机号',
    placeholder: '请输入手机号',
    type: 'input'
}, {
    id: 'status',
    label: '状态',
    placeholder: '请选择状态',
    type: 'select',
    text:'text',
    key:'value',
    list: [{
        text:'开启',
        value: '1'
    },{
        text:'关闭',
        value: '2'
    }]
}])

const dialogState = ref('edit')

const dialogVisible = ref(false)


const params = ref({
    type: '',
    name: '',
    mobile: '',
    status: '',
    page: 1,
    page_size: 20
})

const search = (searchParams: any) => {

    assign(params.value, searchParams)

    params.value.page = 1

    getList()
}

const detail_id = ref()

const add = () => {
    dialogState.value = 'add'
    detail_id.value = undefined
    dialogVisible.value = true;
}

const edit = (row: User) => {
    dialogState.value = 'edit'
    dialogVisible.value = true
    detail_id.value = row.id
}

const tableData = ref<User[]>([])
const total = ref(0)

const getList = () => {
    getProviderList(params.value).then((res: any) => {
        tableData.value = res.items || [];
        total.value = parseInt(res.total_rows) || 0

        stat_data.gift_provider_num = res.stat_data.gift_provider_num || ''
        stat_data.open_provider_num = res.stat_data.open_provider_num || ''
    })
}

const handleSizeChange = (val: number) => {
    params.value.page_size = val
    params.value.page = 1
    getList();
}

const handleCurrentChange = (val: number) => {
    params.value.page = val
    getList()
}

const handleEnable = (row: any) => {
    let enabled = row.agent_status;
    ElMessageBox.confirm(`确认进行【${enabled == 1 ? '禁用' : '启用'}】操作`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(() => {
        toggleProvider({
            id: row.id || undefined,
            type: enabled == 1 ? 2 : 1
        }).then(res => {
            getList()
            ElMessage.success('操作成功')
        })
    }).catch(() => {
        ElMessage.info('已取消操作')
    })
}

const dialogSuccess = () => {
    getList();
    dialogVisible.value = false
}

const dict = computed<any>(() => {
    return $systemStore.dict
})

onMounted(() => {
    getList()
})
</script>
<style lang="scss">
.tips {
    height: 40px;
    width: 100%;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-family: PingFang SC-Regular, PingFang SC;
    font-weight: 400;
    line-height: 22px;
    margin-bottom: 24px;

    .text {

        color: #606266;
        margin-left: 9px;
    }

    .link {
        color: #2770EE;
        margin-left: 8px;
        text-decoration: none;
    }
}
</style>
